src/components/DocsLayout.tsx (2)

669-674: Non-collapsible wrapper has unnecessary summary-targeting CSS classes.

The [&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em] [&>summary]:marker:leading-4 classes only apply to a <summary> child, but non-collapsible groups render a <div> child inside this wrapper. These selectors will never match.

Consider extracting shared classes or removing the summary-specific selectors from the non-collapsible case:

♻️ Proposed fix

     ) : (
       <div
         key={`group-${i}`}
-        className="[&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em] [&>summary]:marker:leading-4 relative select-none"
+        className="relative select-none"
       >
         {groupContent}
       </div>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/DocsLayout.tsx` around lines 669 - 674, The wrapper div
rendering non-collapsible groups contains summary-specific CSS selectors
("[&>summary]:before:mr-1 [&>summary]:marker:text-[0.8em]
[&>summary]:marker:leading-4") that will never match because it renders a <div>
child (see the wrapper with key={`group-${i}`} and variable groupContent);
remove those summary-targeting classes from this non-collapsible wrapper or
extract the shared, non-summary classes into a common variable and apply only
summary-specific selectors on the collapsible wrapper/element that actually
contains a <summary>, so update the className on the non-collapsible wrapper to
omit the [&>summary] rules and keep shared styles centralized.

---

537-550: Consider using a more stable key than String(group.label) for ReactNode labels.

When group.label is a React element (e.g., the GitHub/YouTube/Discord menu items), String(group.label) returns "[object Object]". The index prefix prevents collisions, but if menu items are conditionally included/excluded, the same group could get different keys across renders, causing unexpected open/close state changes.

Consider adding a stable id field to MenuItem type, or using a hash of the label string when available:

const key = typeof group.label === 'string' 
  ? `${index}:${group.label}` 
  : `${index}:group-${index}`

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/DocsLayout.tsx` around lines 537 - 550, The current key
generation in groupInitialOpenState uses String(group.label) which is unstable
for ReactNode labels; update the key logic to use a stable identifier: prefer an
explicit id property on the group (e.g., group.id) if present, otherwise use the
label when it's a string, and as a final fallback produce a deterministic
fallback based on the group's index (e.g., `group-${index}`); update the key
assignment in the reduce callback (the variable currently named key) and ensure
any type/interface for menuConfig/MenuItem supports an optional id so state
remains consistent across conditional renders.

src/routes/$libraryId/$version.tsx (1)

13-19: Consider centralizing the repeated findLibrary/notFound() guard.

The same lookup/404 block now lives in beforeLoad, loader, and RouteForm, with the same pattern repeated in the sibling routes in this PR. A small shared helper would make future changes to library resolution or 404 behavior much easier to keep consistent.

♻️ Helper sketch

+function requireLibrary(libraryId: string) {
+  const library = findLibrary(libraryId)
+  if (!library) {
+    throw notFound()
+  }
+  return library
+}
+
   beforeLoad: (ctx) => {
     const { libraryId, version } = ctx.params
-    const library = findLibrary(libraryId)
-
-    if (!library) {
-      throw notFound()
-    }
+    const library = requireLibrary(libraryId)

Also applies to: 31-35, 53-57

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/routes/`$libraryId/$version.tsx around lines 13 - 19, The repeated
pattern using findLibrary(...) followed by throw notFound() should be
centralized: add a small helper (e.g., ensureLibraryOrThrow(libraryId) or
resolveLibraryOr404) that calls findLibrary and throws notFound() when missing,
then replace the duplicate blocks in beforeLoad, loader, and the RouteForm
component with calls to that helper (use the helper name in each location to
make intent clear and keep behavior consistent across sibling routes).